import React from 'react';
import {Field, View, NavBar, Container, Group, List, Card} from 'amazeui-touch';
import {connect} from 'react-redux';
import Action from '../store/actions';
import {bindActionCreators} from 'redux';
import {hashHistory} from 'react-router'
import {toJson} from '../util';

@connect(
    state => ({...state}),
    dispatch => bindActionCreators(Action, dispatch)
)
export default class PersonDetail extends React.Component {
    handleSubmit(e) {
        e.preventDefault();
        let userName = this.refs.userName.getValue();
        let address = this.refs.address.getValue();
        let phone = this.refs.phone.getValue();
        let payStyle = this.refs.select.getValue();
        let note = this.refs.note.getValue();
        let toralPrice = this.props.location.query.price;
        const cart = JSON.parse(localStorage.getItem("ShoppingCart")).showGoodsMsg;
        const cartData = JSON.stringify(toJson(cart));
        this.props.addOrder(userName, address, phone, payStyle, note, toralPrice, cartData);
        localStorage.removeItem("ShoppingCart");
        hashHistory.push('/Order');
    }

    render() {
        return (
            <View>
                <NavBar
                    amStyle="primary"
                    title="填写订单信息"
                />
                <Container scrollable>
                    <div>
                        <Card>
                            <List>
                                <List.Item
                                    title={"订单信息"}
                                    after={"总价："+this.props.location.query.price}
                                    subTitle={"详细"}
                                    desc={ "....."}
                                >
                                </List.Item>
                            </List>
                        </Card>
                    </div>
                    <Group
                    >
                        <Field
                            ref="userName"
                            label="收件人"
                            containerClassName="my-label"
                            placeholder="您的姓名"
                        />

                        <Field
                            ref="address"
                            label="地址"
                            placeholder="您的地址"
                        />

                        <Field
                            label="联系电话"
                            ref="phone"
                            placeholder="您的手机号"
                            type="number"
                        />

                        <Field
                            type="select"
                            label="支付方式"
                            ref="select"
                            defaultValue="货到付款"
                        >
                            <option value="货到付款">货到付款</option>
                            <option value="微信支付">微信支付</option>
                        </Field>

                        <Field
                            label="备注"
                            ref="note"
                            placeholder="如有必要请填写您的备注"
                            type="textarea"
                        />

                        <Field
                            value="提交"
                            type="submit"
                            amStyle="secondary"
                            block
                            onClick={this.handleSubmit.bind(this)}
                        />
                    </Group>
                </Container>
            </View>
        );
    }
}
